<template>
  <i-select
        ref="select"
        class="ivu-auto-complete"
        :label="label"
        :disabled="disabled"
        :clearable="clearable"
        :placeholder="placeholder"
        :size="size"
        :loading="loading"
        filterable
        remote
        auto-complete
        :remote-method="remoteMethod"
        @on-change="handleChange"
        :transfer="transfer">
        <slot name="input">
            <i-input
                :element-id="elementId"
                ref="input"
                slot="input"
                v-model="currentValue"
                :name="name"
                :placeholder="placeholder"
                :disabled="disabled"
                :size="size"
                :icon="inputIcon"
                @on-click="handleClear"
                @on-focus="handleFocus"
                @on-blur="handleBlur"></i-input>
        </slot>
        <slot>
            <i-option v-for="item in filteredData" :value="item" :key="item">{{ item }}</i-option>
        </slot>
    </i-select>
</template>

<script>
import { AutoComplete } from "iview";
export default {
  extends: AutoComplete,
  props: {
    loading: {
      default: false
    }
  },
  data() {
    return {
      disableEmitChange: false
    };
  },
  watch: {
    value(v) {}
  },
  methods: {
    remoteMethod(query) {
      this.$emit("on-search", query);
    }
  }
};
</script>

<style>

</style>
